<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>其他指令</h1>
      <!-- v-text 类似于innerText -->
      <!-- <div v-text="str"></div> -->
      <!-- v-html 类似于innerHTML -->
      <!-- <div v-html="str"></div> -->
      <!-- v-pre 告诉vue这个标签不需要解析.提高解析速度 -->
      <!-- <div v-pre>{{str}}</div> -->
      <!-- v-once 只解析一次,后面数据变化,更新的模板的时候就不再解析这个标签了 -->
      <!-- <div v-once>{{str}}</div> -->
      <!-- 如果事件处理函数中的代码非常简单.就可以忽略函数,直接在引号中写js代码 -->

      <!-- 还没有和vue实例绑定的时候,利用v-cloak的属性选择器,让当前标签隐藏. 当和vue实例绑定好了之后,vue会自动将标签上的v-cloak删除,删除之后标签就渲染出来了 -->
      <div v-cloak>{{str}}</div>
      <button @click="str='xxxx'">按钮</button>
    </div>

    <script src="./vue.js"></script>
    <script>
      Vue.config.productionTip = false
      const vm = new Vue({
        // el绑定模板
        el: '#app',
        //data定义模板中要使用的数据
        data: {
          str: '<h5>哈哈哈</h5>',
        },
      })
    </script>
  </body>
</html>
